<!--  -->
<template>
  <div class="setting-container">
    <!-- 头部导航 -->
    <van-nav-bar
      title="设置"
      fixed
      :z-index="999"
      @click-left="onClickLeft"
    >
      <template #left>
        <van-icon name="arrow-left" color="#ffffff" size="24" />
      </template>
      <template #right>
        <van-icon name="scan" color="#ffffff" size="24" />
      </template>
    </van-nav-bar>
    <ul>
      <li v-for="item in 24" :key="item" @click="toAddress">
        <span>地址管理</span>
        <van-icon name="arrow" size="18"></van-icon>
      </li>
    </ul>
    <van-button type='info' @click="logOut">退出登录</van-button>
  </div>
</template>

<script>
import { NavBar, Icon,Button,Toast } from "vant";
export default {
  data() {
    return {};
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    toAddress(){
      this.$router.push({name:'ManageAddress'})
    },
    //退出登录
    logOut(){
      //清除数据缓存
      localStorage.removeItem('userInfo');
      Toast.success('退出登录成功')
      this.$router.push('/');
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Toast.name]: Toast,
  },
};
</script>
<style scoped>
.setting-container {
  font-size: 16px;
  padding:46px 10px;
}
/* 头部导航 */
.van-nav-bar {
  background-color: #ff6a00;
}
.setting-container >>> .van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
.setting-container .van-icon{
  top:2px;
}
.setting-container .van-button{
  position:fixed;
  left:0;
  bottom:0px;
  width:100%;
  height:46px;
  border-radius:20px;
}
.setting-container ul li{
  display: flex;
  justify-content: space-between;
  padding:10px 0;
  border-bottom:1px solid #ccc;
}
</style>